<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="1483780974##87f89328c5616669f00302a263fe9061bb852818">
    <title>Byte云课</title>
    <link rel="stylesheet" th:href="@{/font/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/global.css}" href="/static/css/global.css">
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <style>
        /* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }
        #invite-user .modal-body .form-label {
            margin-bottom: 16px;
            font-size:14px;
        }
        #invite-user .modal-body .form-invite {
            width: 80%;
            padding: 6px 12px;
            background-color: #eeeeee;
            border: 1px solid #cccccc;
            border-radius: 5px;
            float: left;
            margin-right: 10px;
        }
        #invite-user .modal-body .msg-modal-style {
            background-color: #7dd383;
            margin-top: 10px;
            padding: 6px 0;
            text-align: center;
            width: 100%;
        }
        #invite-user .modal-body .modal-flash {
            position: absolute;
            top: 53px;
            right: 74px;
            z-index: 999;
        }
        /* end modal */

        .en-footer {
            padding: 30px;
            text-align: center;
            font-size: 14px;
        }
    </style>

    <style>
        .vip-header {
            min-height: 250px;
            margin-bottom: -10px;
            text-align: center;
            margin-top: 50px;
            padding-top: 48px;
            color: #fff;
            background: #0dc091;
        }
        .row{
            margin-left:30px;
        }
        .vip-header-description, .vip-header-title {
            color: #fff;
            text-shadow: 0 4px 10px rgb(0 0 0 / 16%);
        }
        .vip-header-title {
            font-size: 50px;
            font-weight: 700;
            line-height: 1.6em;
        }
        .vip-header-description {
            font-size: 24px;
            font-weight: 100;
        }
        .vip-header-description, .vip-header-title {
            color: #fff;
            text-shadow: 0 4px 10px rgb(0 0 0 / 16%);
        }
        .vip-details {
            background: linear-gradient(#0dc091 10%,#fff 60%);
            background-size: 100% 100%;
        }
        .vip-details {
            background: linear-gradient(#0dc091 10%,#fff);
            background-size: 100% 100%;
            margin-bottom: -10px;
        }
        .vip-details>.container {
            padding-top: 10px;
        }
        .vip-row {
            text-align: center;
            padding: 0 120px;
        }
        .vip-item:nth-child(1) {
            padding-top: 40px;
            width: 33%;
        }
        .vip-row div {
            position: relative;
            float: left;
        }
        .vip-item:nth-child(1) ul li:first-child {
            border-top-left-radius: 30px;
        }
        .vip-item:nth-child(1) ul li {
            border-right: none;
            font-size: 20px;
            color: #515151;
            font-weight: 600;
            letter-spacing: 3px;
        }
        .vip-item ul li:first-child, .vip-item ul li:last-child {
            border-radius: 0;
        }
        .vip-item ul li h4 {
            line-height: 60px;
            font-size: 28px;
            font-weight: 600;
        }
        .vip-item:nth-child(2n) {
            padding-top: 40px;
            width: 33%;
        }
        .vip-row div {
            position: relative;
            float: left;
        }
        .list-group {
            margin-bottom: 20px;
            padding-left: 0;
        }
        .vip-item:nth-child(2) ul li {
            border-right: none;
        }
        .vip-item ul li:first-child, .vip-item ul li:last-child {
            border-radius: 0;
        }
        .vip-item ul li h4.is-free-user {
            color: #908f8f;
        }
        .vip-item ul li h4 {
            line-height: 60px;
            font-size: 28px;
            font-weight: 600;
        }
        .vip-item:nth-child(2) ul li {
            border-right: none;
        }
        .vip-item ul li {
            line-height: 27px;
        }
        .vip-item ul li img {
            width: 32px;
            height: 24px;
        }
        .vip-item .item-vip-footer {
            height: 190px;
            padding-top: 50px;
        }
        .vip-item ul li .btn-smaller {
            width: 110px;
            height: 35px;
            font-size: 20px;
            padding: 3px;
        }
        .vip-item ul li .btn-all {
            border: none;
            background: #43afd7;
            font-weight: 600;
            border-radius: 20px;
            color: #fff;
        }
        .btn {
            border-radius: 0;
        }
        .vip-item:nth-child(3) {
            padding-top: 40px;
            width: 33%;
        }
        .vip-row div {
            position: relative;
            float: left;
        }
        .vip-hots {
            padding: 150px 0;
            background: #fff;
        }
        .vip-hots-header h4 {
            margin-bottom: 80px;
            color: #676767;
            font-size: 40px;
            font-weight: 700;
            text-align: center;
        }
        .vip-hots-header h4 span {
            color: #0dc091;
        }
        .media-body, .media-left, .media-right {
            display: table-cell;
            vertical-align: middle;
        }
        .media-body, .media-left, .media-right {
            display: table-cell;
            vertical-align: middle;
        }
        .vip-hots-body .media-heading {
            margin-bottom: 10px;
            font-size: 20px;
            color: #0dc091;
        }
        .vip-hots-body p {
            width: 60%;
            color: #676767;
            font-size: 14px;
        }
        .vip-faq {
            padding: 0 100px;
            background: #fff;
        }
        .vip-faq .container {
            padding: 60px;
        }
        .vip-faq-header {
            color: #0dc091;
            font-size: 24px;
            font-weight: 700;
        }
        .vip-faq-header span {
            display: inline-block;
            margin-left: 20px;
            color: #9a9a9a;
            font-size: 15px;
            font-weight: 100;
        }
        .vip-faq-body h4 {
            margin: 30px 0;
            font-size: 22px;
            font-weight: 700;
            color: #464646;
        }
        .vip-faq-body div {
            margin: 6px 0;
            color: #676767;
            font-size: 16px;
        }
        .vip-faq-footer {
            margin-top: 40px;
        }
        .vip-faq-footer a {
            color: #9a9a9a;
            font-size: 18px;
        }
        .modal-header {
            color: #4c5157;
            border-bottom: 2px solid rgba(0,0,0,.2);
            overflow: hidden;
        }
        .modal-header h3, .modal-header h4 {
            margin: 0;
            font-weight: 700;
            color: #4c5157;
        }
        .modal-content {
            border-radius: 4px;
            padding: 20px;
        }
        div.tooltip {
            position:absolute;
            top:0;
        }
    </style>
</head>

<body>
<div th:include="index::head-nav"></div>
<div class="vip-header layout-no-margin-top" style="min-height:215px;">
    <h1 class="vip-header-title">加入实验楼会员，拥有自己的实验机</h1>
    <h4 class="vip-header-description">精品课程 + 环境保存 + 实验联网 + 会员客户端</h4>
</div>
<div class="vip-details">
    <div class="container">
        <div class="row vip-row hidden-xs">
            <div class="vip-item">
                <ul class="list-group">
                    <li class="list-group-item"><h4>&nbsp;</h4></li>
                    <li class="list-group-item">免费课程</li>
                    <li class="list-group-item">会员课程</li>
                    <li class="list-group-item">在线答疑</li>
                    <li class="list-group-item">面授优惠</li>
                    <li class="list-group-item">简历指导</li>
                    <li class="list-group-item" style="height:190px;">&nbsp;</li>
                </ul>
            </div>
            <div class="vip-item" >
                <ul class="list-group">
                    <li class="list-group-item"><h4 class="is-free-user">免费</h4></li>
                    <li class="list-group-item"><img th:src="@{/img/vip-service-status.png}" alt=""></li>
                    <li class="list-group-item">&nbsp;</li>
                    <li class="list-group-item">&nbsp;</li>
                    <li class="list-group-item">&nbsp;</li>
                    <li class="list-group-item">&nbsp;</li>
                    <li class="list-group-item item-vip-footer" style="">
                        <strong  style="color:#DBDBDB;font-size:28px;display:block;">免费</strong>
                        <br>
                        <a type="button" class="btn btn-all btn-smaller" th:href="@{/user/toReg}" data-toggle="modal" data-sign="signup">注册</a>
                    </li>
                </ul>
            </div>
            <div class="vip-item" >
                <ul class="list-group">
                    <li class="list-group-item"><h4 class="is-vip-user">会员 <img th:src="@{/img/icon-vip.png}" alt=""></h4></li>
                    <li class="list-group-item"><img th:src="@{/img/vip-service-status.png}" alt=""></li>
                    <li class="list-group-item"><img th:src="@{/img/vip-service-status.png}" alt=""></li>
                    <li class="list-group-item"><img th:src="@{/img/vip-service-status.png}" alt=""></li>
                    <li class="list-group-item"><img th:src="@{/img/vip-service-status.png}" alt=""></li>
                    <li class="list-group-item"><img th:src="@{/img/vip-service-status.png}" alt=""></li>
                    <li class="list-group-item item-vip-footer" style="">
                        <strong class="vip-price" style="font-size: 15px;display:block;margin-bottom: -10px"><span style="font-size:40px;color:#FC9F0E">￥99</span> / 年</strong>
                        <del style="font-size: 12px;color: #999;">原价 199元</del>
                        <br>
                        <a type="button" class="btn btn-all btn-smaller" th:href="@{/user/tologin}">加入</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="vip-hots">
    <div class="container">
        <div class="vip-hots-header">
            <h4>Byte学院 有<span>温度、</span>有<span>深度、</span>有<span>价值</span></h4>
        </div>
        <div class="row vip-hots-body">
            <div class="col-md-4">
                <div class="media">
                    <div class="media-left">
                        <img class="media-object" th:src="@{/img/vip-allcourses.png}">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">课程畅学</h4>
                        <p>会员专属精品课程，每周不断更新，给你最快的成长</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="media">
                    <div class="media-left">
                        <img class="media-object" th:src="@{/img/vip-24.png}">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">随时指导</h4>
                        <p>名师在线指导，收获理想offer</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="media">
                    <div class="media-left">
                        <img class="media-object" th:src="@{/img/vip-internet.png}">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">优质体验</h4>
                        <p>线下学习氛围良好，坚持提升不懈怠</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="vip-faq">
    <div class="container">
        <div class="vip-faq-header">
            <img th:src="@{img/vip-faq.png}">
            FAQ
            <span></span>
        </div>
        <div class="vip-faq-body">
            <h4>会员课程和免费课程有什么区别？</h4>
            <div>1. 会员课程多为项目课，免费课程多为基础课。</div>
            <div>2. 会员课程主要由Byte学院资深教师制作及维护，免费课程主要收集自网络优质资源。</div>
            <div>3. 会员可联网并保存环境，会员课程内容不受网络及时间限制。</div>
            <div>4. 会员课程更新频率更高，难度会更大。</div>
        </div>
        <div class="vip-faq-body">
            <h4>会员客户端是什么？</h4>
            <div>实验楼会员专属的桌面端软件，即开即用，自动连接云端实验桌面，特点:</div>
            <div>1. 易用：即开即用，随时远程访问实验桌面</div>
            <div>2. 安全：数据云端保存，HTTPS加密传输</div>
            <div>3. 跨平台：支持Windows，Mac OSX 及 Linux平台</div>
            <div>4. 更多功能：实验工具中提供查看文档及一键SSH连接实验环境等</div>
        </div>
        <div class="vip-faq-body">
            <h4>什么情况下需要保存实验环境？</h4>
            <div>1. 当时间不多或实验耗时较长，无法连续完成一个实验时。</div>
            <div>2. 当实验遇到问题但无法及时解决时。</div>
            <div>3. 当需要一台在线开发环境时。</div>
        </div>
        <div class="vip-faq-body">
            <h4>环境联网有什么好处？</h4>
            <div>1. 实验中随时连接站外资源，例如Github等。</div>
            <div>2. 支持大量联网课程，例如微信微博开发及SaaS开发。</div>
        </div>
        <div class="vip-faq-body">
            <h4>成功购买会员服务后，是否可以退款？</h4>
            <div>支付购买成功后，暂不接受退款申请，请详细查看会员服务内容后进行购买，如有任何不清楚的地方欢迎在 <a href="/questions/">讨论区</a> 发帖询问。</div>
        </div>
        <div class="vip-faq-body">
            <h4>高级会员与普通会员有什么不同？</h4>
            <div>1. Byte云课提供专职助教，在讨论区为高级会员提供答疑服务，回答学习会员课程过程中遇到的问题。</div>
            <div>2. 购买训练营享受5折优惠。</div>
        </div>
    </div>
</div>





<div class="modal fade" id="flash-message" tabindex="-1" role="dialog">
    <div class="modal-dialog" rolw="document">
    </div>
</div>
<div class="modal fade" id="modal-message" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">注意</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary confirm" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="vip-modal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">加入会员</h4>
                <div class="alert-message">
                    <div class="alert alert-danger"></div>
                </div>
            </div>
            <div class="modal-body">
                <div class="vip-modal-item ">
                    <div class="vip-modal-item-header">手机号</div>
                    <div class="vip-modal-item-body">
                        <div class="input-group">
                            <input type="text" class="form-control phone-number"
                                   value=""
                            >
                            <span class="input-group-btn">
                                <button class="btn btn-info get-phone-code "
                                        data-url="/user/sms/code">获取验证码</button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="vip-modal-item vip-phone-code" >
                    <div class="vip-modal-item-header">验证码</div>
                    <div class="vip-modal-item-body">
                        <input type="text" class="form-control phone-code">
                        <a class="pull-right text-success" href="/questions/2540" target="_blank">收不到验证码？</a>
                    </div>
                </div>

                <div class="vip-modal-item">
                    <div class="vip-modal-item-header">使用实验豆<span>（最高使用100个实验豆）</span></div>
                    <div class="vip-modal-item-body">
                        <div class="consume-beans">
                            <input type="checkbox">
                            <span>使用</span>
                            <input class="form-control" type="text" disabled value="0">
                            <span>个实验豆抵扣</span>
                            <span class="beans">0</span>
                            <span>元</span>
                            <div class="left-beans">
                                <div>您的实验豆还剩 <strong>0</strong> 个</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="vip-modal-item">
                    <div class="vip-modal-item-header">支付方式</div>
                    <div class="vip-modal-item-body">
                        <div class="pay-method pay-method-ali active" data-pay="ALI_WEB">
                        </div>
                        <div class="pay-method pay-method-wx" data-pay="WX_NATIVE">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-body vip-modal-qrcode" style="display:none;">
                <div class="vip-wx-price">付款：<span></span></div>
                <div class="vip-wx-qrcode"></div>
                <a class="vip-wx-method" href="javascript:;">更换支付方式</a>
            </div>
            <div class="modal-footer">
                <div class="pull-left real-price">
                    <div>
                        <div style="float:left"><span>付款：</span><strong>￥</strong><strong class="last-price">299</strong></div>
                        <br class="__web-inspector-hide-shortcut__">

                    </div>
                </div>
                <div class="pull-right pay-btn">
                    <a class="btn btn-warning" data-url="/purchase/member/pay">确认购买</a>
                    <input type="checkbox" checked>
                    <span>同意<a href="/terms" target="_blank">会员服务条款</a></span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="paid-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" style="text-align:center;">支付确认</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <button class="btn btn-primary paid-confirm" type="button">支付成功</button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-primary paid-method" type="button" style="background:none; color:#0c9">选择支付方式</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="index::footer"></div>
</body>
</html>